<!--
 * @FileDescription: 员工用户查看自己个人信息表单
 * @Author: 叶永鸿、袁年政
 * @Date: 2021-7-17
 * @LastEditors: 叶永鸿
 * @LastEditTime: 2021-7-18
 -->
<template>
  <!--员工个人用户信息-->
  <div>
    <el-space direction="vertical">
      <!--基础信息卡片-->
      <el-card style="width: 1000px">
        <template #header>
          <div>
            <span>个人信息</span>
          </div>
          <el-button size="mini" style="margin-left: 850px" @click="toChange">{{
            changedStation
          }}</el-button>
        </template>
        <div>
          <el-descriptions class="margin-top" :column="3" :size="size" border>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-user"></i>
                姓名
              </template>
              <el-input v-model="empInfor.realname" :disabled="!isChanging">
              </el-input>
              <!-- <el-button size="mini" v-if="isChanging">修改</el-button> -->
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-user"></i>
                用户名
              </template>
              {{ empInfor.username }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-s-custom"></i>
                性别
              </template>
              <el-input v-model="empInfor.gender" :disabled="!isChanging">
              </el-input>
              <!-- <el-button size="mini" style="text-align=right" v-if="isChanging">修改</el-button> -->
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              <el-input v-model="empInfor.telephone" :disabled="!isChanging">
              </el-input>
              <!-- <el-button size="mini" v-if="isChanging">修改</el-button> -->
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template #label>
                <i class="el-icon-office-building"></i>
                公司名
              </template>
              {{ empInfor.companyName }}
            </el-descriptions-item> -->
            <!-- <el-descriptions-item>
              <template #label>
                <i class="el-icon-tickets"></i>
                职位
              </template>
              {{ form.emploeePosition }}
            </el-descriptions-item> -->
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-tickets"></i>
                期望年薪（万）
              </template>
              <el-input v-model="empInfor.expectedsalary" :disabled="!isChanging">
              </el-input>
              <!-- <el-button size="mini" style="text-align=right" v-if="isChanging">修改</el-button> -->
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-date"></i>
                生日
              </template>
              <el-input v-model="empInfor.birth" :disabled="!isChanging">
              </el-input>
              <!-- <el-button size="mini" style="text-align=right" v-if="isChanging">修改</el-button> -->
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-date"></i>
                邮箱
              </template>
              <el-input v-model="empInfor.email" :disabled="!isChanging">
              </el-input>
              <!-- <el-button size="mini" style="text-align=right" v-if="isChanging">修改</el-button> -->
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-table :data="empExp" border style="width: 100%">
            <!-- <el-table-column type="expand">
              <template #default="">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="评价">
                    <span>{{evaluation}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column> -->
            <el-table-column prop="companyname" label="公司名" width="195">
            </el-table-column>
            <el-table-column prop="recruited" label="入职时间" width="200">
            </el-table-column>
            <el-table-column prop="suspended" label="离职时间" width="200">
            </el-table-column>
            <el-table-column prop="position" label="职位" width="230">
            </el-table-column>
            <el-table-column prop="salary" label="年薪" width="130">
            </el-table-column>
          </el-table>

          <el-divider></el-divider>
          <!--绩效-->
          <span>员工绩效</span>

          <el-table
            :data="empPerformances"
            :default-sort="{ prop: 'start', order: 'descending' }"
          >
            <el-table-column type="expand">
              <template #default="props">
                <el-form>
                  <el-form-item label="详细记录：">
                    {{ props.row.text }}
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="start"
              label="开始时间"
              width="125"
              sortable=""
            ></el-table-column>
            <el-table-column
              prop="end"
              label="结束时间"
              width="125"
            ></el-table-column>
            <el-table-column
              prop="rank"
              label="评分"
              width="50"
            ></el-table-column>
            <el-table-column prop="title" label="  绩效大纲"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-space>
  </div>
</template>


<script>
export default {
  name: "myself",
  data() {
    return {
      empInfor: this.$store.state.empInformation.empInfor,
      empExp: this.$store.state.empInformation.empExp,
      changedStation: "修改模式",
      isChanging: false,
      empPerformances: this.$store.state.empPerformance.performances,
    };
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate();
    },

    reload() {
      var that = this;
      var empInfor;
      var empExp;
      that.$axios
        .get("http://47.100.167.206:8082/Query/empsearchmyself", {
          headers: {
            token: this.$store.state.loginInfor.token,
          },
        })
        .then(
          function (response) {
            console.log(response)
            that.empInfor = response.data.data;
            console.log(that.empInfor);
            empInfor = response.data.data;
            console.log(response.data.data);
            that.$axios
              .get("http://47.100.167.206:8082/Query/queryExperience", {
                headers: {
                  token: that.$store.state.loginInfor.token,
                },
              })
              .then(
                function (response) {
                  empExp = response.data.data;
                  console.log(response);
                  that.$store.commit("empInformation", {
                    empInfor: empInfor,
                    empExp: empExp,
                  });

                  that.$axios
                    .get(
                      "http://47.100.167.206:8082//Query/empqueryPerformance",
                      {
                        params: {
                          empid: empInfor.empid,
                        },
                        headers: {
                          token: that.$store.state.loginInfor.token,
                        },
                      }
                    )
                    .then(
                      function (response) {
                        console.log(response);
                        that.$store.commit("Performance_Mine", {
                          performances: response.data.data,
                        });
                      },
                      function (err) {
                        console.log(err);
                      }
                    );
                },
                function (err) {
                  console.log(err);
                }
              );
          },
          function (err) {
            console.log(err);
          }
        );
    },

    toChange() {
      var that = this;
      if (this.isChanging) {
        that.$axios
          .get("http://47.100.167.206:8082/Modify/ModifyEmp", {
            params: {
              realname: that.empInfor.realname,
              gender: that.empInfor.gender,
              birth: that.empInfor.birth,
              email: that.empInfor.email,
              telephone: that.empInfor.telephone,
              expectedsalary: that.empInfor.expectedsalary,
            },
            headers: {
              token: that.$store.state.loginInfor.token,
            },
          })
          .then(
            function (response) {
              console.log(response);
              if (response.data.message == "repeatedusername") {
                that.$message({
                  type: "error",
                  message: "该用户已重复，请重新输入",
                });
              } else if (response.data.message == "repeatedtelephone") {
                that.$message({
                  type: "error",
                  message: "该手机号码已重复，请重新输入",
                });
              } else if (response.data.message == "repeatedemail") {
                that.$message({
                  type: "error",
                  message: "该邮箱地址已重复，请重新输入",
                });
              } else if (response.data.message == "changesuccess") {
                that.$message({
                  type: "success",
                  message: "成功保存",
                });
              } else {
                that.$message({
                  type: "error",
                  message: "保存出现未知错误，请重新检查信息是否完整",
                });
              }
              that.reload();
            },
            function (err) {
              that.$message({
                type: "error",
                message: "保存出现网络，请重新登录",
              });
              that.reload();
            }
          );

        this.isChanging = false;
        this.changedStation = "修改模式";
      } else {
        this.isChanging = true;
        this.changedStation = "保存修改";
      }
    },
  },
};
</script>

<style scoped>
</style>
